import React, { memo, useMemo, useState } from 'react'


function calcNumTotal (number) {
  console.log('calcNumTotal重新计算');
  let num = 0;
  for (let index = 0;index < number;index++) {
    num += index

  }
  return num;

}

const App = memo(() => {
  const [count, setCount] = useState(10);
  // const result = calcNumTotal(50)
  // useMemo 返回的是计算结果 useCallback 返回的是函数
  // 参数一：函数，参数二：依赖，只有依赖发生变化时，才会重新计算
  const result = useMemo(() => calcNumTotal(50), [])
  return (
    <div>
      <h2>计算结果:{result}</h2>
      <h2>计数器：{count}</h2>
      <button onClick={e=>setCount(count+1)}>+1</button>
    </div>
  )
})

export default App